<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市多选移动</title>
    <style>
        div {
            display: inline-block;
        }

        select {
            width: 50px;
            height: 80px;
        }
    </style>
    <script>
        window.onload = function () {
            // 获取 button 对象
            let leftBtn = document.getElementById("left-btn");
            let rightBtn = document.getElementById("right-btn");
            // 绑定左移事件
            leftBtn.onclick = function () {
                // 获取 select 对象的子 option
                let leftCityOptionArr = document.getElementById("left-city").children;
                let rightCity = document.getElementById("right-city");
                for (let i = 0; i < leftCityOptionArr.length; i++) {
                    // 拿到所有选中的 option
                    if (leftCityOptionArr[i].selected) {
                        // 添加到 rightCityOption 的父元素中
                        rightCity.appendChild(leftCityOptionArr[i]);
                        i--;
                    }
                }
            }
            // 绑定右移事件
            rightBtn.onclick = function () {
                let rightCityOptionArr = document.getElementById("right-city").children;
                let leftCity = document.getElementById("left-city");
                for (let i = rightCityOptionArr.length - 1; i >= 0; i--) {
                    if (rightCityOptionArr[i].selected) {
                        leftCity.appendChild(rightCityOptionArr[i]);
                    }
                }
            }
        }
    </script>
</head>
<body>
<select id="left-city" multiple>
    <option value="0" selected>重庆</option>
    <option value="1">武汉</option>
    <option value="2">上海</option>
    <option value="3">成都</option>
    <option value="4">北京</option>
    <option value="5">河北</option>
    <option value="6">河南</option>
    <option value="7">广州</option>
</select>

<div class="move">
    <button id="left-btn">&gt;&gt;</button>
    <br>
    <button id="right-btn">&lt;&lt;</button>
</div>

<select id="right-city" multiple>

</select>
</body>
</html>